<template>
	<view :class="themeName">
		<view class="coupon-card" @tap="onCardSelf">
			<!-- Aside -->
			<view class="coupon-card__aside">
				<price :content="money" :prec="2" mainSize="60rpx" color="rgba(245, 173, 3, 1)" :prefix="null"
					suffix="元" />
			</view>

			<!-- Main -->
			<view class="coupon-card__main">
				<view class="coupon-card__main-section">
					<text class="md bold m-b-24">{{ name }}</text>
					<text class="xxs lighter m-b-20">{{ time }}</text>
					<text class="xxs lighter">{{ scene }}</text>
				</view>

				<template v-if="mode === 'radio'">
					<u-checkbox class="u-checkbox" v-model="checked" shape="circle" :name="id" :disabled="false"
						:active-color="themeColor" />
				</template>

				<template v-if="mode === 'get'">
					<image class="pendant pendant--receive" v-if="gotten"
						:src="$getImageUri('resource/image/shopapi/uniapp/coupon_receive.png')" />
				</template>
				<template v-if="button">
					<view :class="[
        					'pendant', 
        					'pendant-button',
        					button.disable ? 'pendant-button--disable' : `pendant-button--${button.theme}`
        				]" @tap="onButton">{{ button.name }}</view>
				</template>
			</view>
		</view>
		<view class="instructions bg-white" v-if="descShow">
			<view class="flex row-between" @click="showTips=!showTips">
				<view class="xs normal">{{ desc.title }}</view>
				<u-icon :name="showTips==true?'arrow-up':'arrow-down'" size="24"></u-icon>
			</view>
			<view class="xs muted m-t-20" v-show="showTips==true">
				<view v-for="item in desc.content" :key="item">{{ item }}</view>
			</view>
		</view>
	</view>
</template>


<script>
	/**
	 * @description 优惠券卡片
	 * @property {String} mode 卡片模式[normal|get|radio] (默认值: normal) 
	 *   注：radio模式下需要配合u-radio-group标签
	 * 
	 */

	export default {
		name: 'CouponCard',

		props: {
			// 卡片模式
			mode: {
				type: String,
				default: 'normal',
			},

			// 优惠券ID
			couponId: {
				type: Number | String,
				default: ''
			},

			// 名称
			name: {
				type: String,
				default: ''
			},

			// 金额
			money: {
				type: String | Number,
				default: 0
			},

			// 使用条件
			condition: {
				type: String,
				default: ''
			},

			// 优惠方式
			conditionWay: {
				type: String,
				default: ''
			},

			// 使用时间
			time: {
				type: String,
				required: true
			},

			// 使用场景
			scene: {
				type: String,
				default: ''
			},

			// 按钮名称
			button: {
				type: Object | Boolean,
				// default: {
				// 	name: '领取',
				// 	theme: 'primary',
				// }
				default: false
			},

			// 是否已得到【get模式】
			gotten: {
				type: Boolean,
				default: false
			},

			// 是否选中【radio模式】
			checked: {
				type: Boolean,
				default: false
			},

			// 使用说明
			desc: {
				type: Object | Boolean,
				default: false
			},

			prefix: {
				type: String,
				default: '￥'
			},
		},

		data() {
			return {
				showTips: false
			}
		},

		computed: {
			// 优惠券卡片ID
			id() {
				return this.couponId
			},
			descShow() {
				return this.desc && (this.desc.title != '' || this.desc.content.length > 0)
			}
		},

		methods: {
			// 领取优惠券
			onButton() {
				if (!this.isLogin) {
					this.$Router.push('/bundle2/pages/login/login')
					return
				}
				// if (this.button.disable) return
				this.$emit('button', this.couponId)
			},

			// 点击卡片
			onCardSelf() {
				if (this.mode !== 'radio') return
				this.$emit('change', !this.checked)
				this.$emit('update:checked', !this.checked)
			}
		}
	}
</script>


<style lang="scss" scoped>
	.coupon-card {
		display: flex;
		width: 100%;
		height: 200rpx;
		background: url(../../styles/image/coupon_card2.png) no-repeat;
		background-size: contain;
		background-position: center;

		&__aside {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 212rpx;
			color: rgba(245, 173, 3, 1);
		}

		&__main {
			position: relative;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;

			&-section {
				display: flex;
				flex-direction: column;
			}

			.u-checkbox {
				position: relative;

				&::after {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					display: block;
					content: "";
					width: 100%;
					height: 100%;
				}
			}


			.pendant {
				position: absolute;

				&-button {
					right: 20rpx;
					top: 70rpx;
					padding: 8rpx 0;
					border-radius: 60px;
					width: 136rpx;
					text-align: center;
					font-size: $-font-size-nr;

					&--primary {
						color: #E6FF28;
						background: linear-gradient(90deg, #035959 0%, #003232 100%);
					}

					&--normal {
						border-width: 1px;
						border-style: solid;
						@include border_color();
						@include font_color();
					}

					&--muted {
						border: $-solid-border;
						color: $-color-muted;
					}

					&--disable {
						background-color: #F4F4F4;
						color: $-color-lighter;
					}
				}

				&--receive {
					height: 78rpx;
					width: 100rpx;
					top: 0;
					right: 20rpx;
				}
			}
		}

	}

	.instructions {
		padding: 14rpx 20rpx;
	}
</style>